<template >
    <div class="mask">
        <div class="model">
            <h2>弹窗</h2>
            <p>弹窗内容</p>
        </div>
    </div>
</template>

<script>
/**
 * Teleport:
 *      作用：把组件挂载(渲染)到指定位置或者指定结构
 *      用于场景：比如弹窗组件，需要挂载到body上
 */

</script>


<style scoped>
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
};
.model{
    width: 400px;
    height: 250px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
</style>